<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
      @submit.native.prevent
    >
      <div class="form-title">后台管理系统</div>
      <el-form-item prop="user">
        <el-input
          type="text"
          v-model="ruleForm.user"
          placeholder="用户名"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          placeholder="密码"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      image:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        name: '管理员一号',
      ruleForm: {
        user: "",
        pass: ""
      },
      rules: {
        user: [{ validator: validateUser, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.ruleForm.user == "admin" && this.ruleForm.pass == "123456") {
            window.sessionStorage.setItem("name", this.name);
            window.sessionStorage.setItem("image", this.image);
            this.$message({
              message: "账号密码验证成功！",
              type: "success"
            });
            setTimeout(() => {
              this.$router.push("/admin");
            }, 3000);
          } else {
            this.$message.error("账号或者密码错误！");
          }
        } else {
          console.log("error submit!!");
          this.$message.error("请输入账号或密码");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image: -webkit-linear-gradient(
      top,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("~@/assets/image/08.png");
  background-image: -moz-linear-gradient(
      top,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("~@/assets/image/08.png");
  background-image: -ms-linear-gradient(
      top,
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("~@/assets/image/08.png");
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("~@/assets/image/08.png");
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  -webkit-animation: bng 1s ease;
  -moz-animation: bng 1s ease;
  -ms-animation: bng 1s ease;
  animation: bng 1s ease;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  background-size: 100% 100%;
} 
.demo-ruleForm {
  width: 280px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 1px 1px 10px #ffffff;
  border-radius: 8px;
}
.form-title {
  padding: 10px 0px 20px 0px;
  text-align: center;
}
.btn {
  width: 100%;
  margin: 0;
}

/*  */

</style>
